const video = document.querySelector(".video");
const togglePlay = document.querySelector(".play");
const togglePause = document.querySelector(".pause");

const toggle = document.querySelector(".toggle");
const ended = document.querySelector(".ended");
const process = document.querySelector(".process");
const timeRemain = document.querySelector(".timeRemain");


toggle.addEventListener('click', toggleVideo);
ended.addEventListener('click', endVideo);
process.addEventListener('change', inputChange);


// 监听播放改变
video.addEventListener('timeupdate', function() {
  // console.log('监听正在播放的音乐');
  progressBar();
  showTime();
})

video.addEventListener('pause', function() {
  togglePause.style.display = "block";
  togglePlay.style.display = "none";
})

function toggleVideo() {
  if (video.paused) {
    video.play();
    togglePause.style.display = "none";
    togglePlay.style.display = "block";
  } else {
    video.pause();
    togglePause.style.display = "block";
    togglePlay.style.display = "none";
  }
}

function endVideo() {
  // console.log("结束视频");
  video.currentTime = 0;
  progressBar()
  video.pause();
}

function progressBar() {
  // 670px
  // console.log(video.currentTime, video.duration);
  process.value = (video.currentTime / video.duration) * 100;
  // console.log("-----------------", process.value);
}


// 时间显示
function showTime() {
  // 得到分钟
  let minute = Math.floor((video.duration - video.currentTime) / 60);
  const m = minute < 10 ? '0' + minute : minute;
  let second = Math.floor((video.duration - video.currentTime) - 60 * m);
  const s = second < 10 ? '0' + second : second;
  timeRemain.innerHTML = `${m}:${s}`;
  // console.log(`${m}:${s}`);
}

function inputChange(event) {
  // console.log(event.target.value);
  video.currentTime = (event.target.value * video.duration) / 100;
  // console.log("=======", video.currentTime);
  progressBar();
}